<template>
  <a-card size="small" :hoverable="true" class="portal-box">
    <!-- <div slot="title">
      <span class="ant-card-title">{{ item.name }}</span>
    </div> -->
    <div v-if="!loadComplate" style="width: 100%;height: 100%;margin-top: 20px;text-align: center;">
      <a-spin></a-spin>
    </div>
    <div ref="chartContainer" class="eip-chart-container" v-show="item.config != null">
    </div>
    <div class="eip-common-noData portal-common-noData-eChart" v-show="item.config == null">
      <img src="@/assets/nodata.png" alt="" class="eip-img">
      <p class="eip-noData-txt">暂无数据</p>
    </div>
  </a-card>
</template>

<script>
import Vue from 'vue'
import {
  businessDataFormSource,
} from "@/services/system/zerocode/run/edit";
import { findById } from "@/services/system/datasource/edit";
import resize from './mixins/resize'
export default {
  mixins: [resize],
  props: {
    id: {
      type: Number
    },
    name: {
      type: String
    },
    item: {
      type: Object,
      default: () => { return { x: 0, y: 0, w: 0, h: 0, i: null, name: null, type: null, config: null, echartType: null } }
    }
  },
  data() {
    return {
      height: "200px",
      width: "200px",
      activeName: 'first',
      chart: null,
      loadComplate: false,
      dataSource: {},
      option: {}
    }
  },

  mounted() {
    this.initUnit();
  },
  methods: {
    /**
     * 
     */
    async initUnit() {
      let that = this;
      if (!this.$echarts) {
        Vue.prototype.$echarts = window.echarts;
      }
      this.chart = this.$echarts.init(
        this.$refs.chartContainer
      );
      this.dataSource = JSON.parse(this.item.config);
      that.option = this.dataSource.option;
      await that.initLegend();
      await that.initX();
      if (["bar"].includes(this.item.echartType)) {
        await that.initBarValue();
      }
      if (["line"].includes(this.item.echartType)) {
        await that.initLineValue();
      }
      if (["pie"].includes(this.item.echartType)) {
        await that.initPieValue();
      }

      that.chart.setOption(that.option, true);
      that.chart.resize();
      that.loadComplate = true;
    },

    /**
     * 初始化Legend
     */
    async initLegend() {
      var legend = this.dataSource.legend;
      var data = [];
      if (legend) {
        var result = await this.findDataSource(legend)
        result.forEach(item => {
          data.push(item.name)
        });
      }
      this.option.legend.data = data;
    },

    /**
     * 初始化x轴
     */
    async initX() {
      var x = this.dataSource.x;
      var data = [];
      if (x) {
        var result = await this.findDataSource(x)
        result.forEach(item => {
          data.push(item.name)
        });
        this.option.xAxis.data = data;
      }

    },

    /**
     * 初始化数据源
     */
    async initBarValue() {
      var value = this.dataSource.value;
      var data = [];
      if (value) {
        var datas = await this.findDataSource(value)
        //若有legend
        let that = this;
        if (this.option.legend.data.length > 0) {
          this.option.legend.data.forEach(function (item, i) {
            var sdata = [];
            //x轴
            that.option.xAxis.data.forEach(function (itemj, j) {
              //便利数据
              var value = 0;
              datas.forEach(function (iteml, l) {
                if (iteml.name == itemj && iteml.legend == item) {
                  value = iteml.value;
                  return false;
                }
              });
              if (that.dataSource.xAxiscolor) {
                sdata.push({
                  value: value,
                  itemStyle: {
                    color: that.dataSource.xAxiscolor.split(',')[j]
                  }
                });
              } else {
                sdata.push(value);
              }

            });
            var type = "bar";
            var d = {
              name: item,
              type: type,
              data: sdata
            };
            data.push(d);
          });
        }
        else {
          var sdata = [];
          this.option.xAxis.data.forEach(function (itemj, j) {
            var value = 0;
            datas.forEach(function (iteml, l) {
              if (iteml.name == itemj) {
                value = iteml.value;
                return false;
              }
            });
            if (that.dataSource.xAxiscolor) {
              sdata.push({
                value: value,
                itemStyle: {
                  color: that.dataSource.xAxiscolor.split(',')[j]
                }
              });
            } else {
              sdata.push(value);
            }
          });

          var d = {
            type: "bar",
            label: {
              show: true,
              position: 'top',
              color: "#000"
            },
            data: sdata
          };
          data.push(d);
        }
      }
      this.option.series = data;
    },
    /**
        * 初始化数据源
        */
    async initPieValue() {
      var value = this.dataSource.value;
      var data = [];
      if (value) {
        var datas = await this.findDataSource(value)
        //若有legend
        datas.forEach(item => {
          data.push({
            name: item.name,
            value: item.value
          });
        });
        this.option.series[0].data = data;
      }
    },
    /**
    * 初始化数据源
    */
    async initLineValue() {
      var value = this.dataSource.value;
      var data = [];
      if (value) {
        var datas = await this.findDataSource(value)
        //若有legend
        let that = this;
        if (this.option.legend.data.length > 0) {
          this.option.legend.data.forEach(function (item, i) {
            var sdata = [];
            //x轴
            that.option.xAxis.data.forEach(function (itemj, j) {
              //便利数据
              var value = 0;
              datas.forEach(function (iteml, l) {
                if (iteml.name == itemj && iteml.legend == item) {
                  value = iteml.value;
                  return false;
                }
              });
              if (that.dataSource.xAxiscolor) {
                sdata.push({
                  value: value,
                  itemStyle: {
                    color: that.dataSource.xAxiscolor.split(',')[j]
                  }
                });
              } else {
                sdata.push(value);
              }

            });
            var type = "line";
            var d = {
              name: item,
              type: type,
              data: sdata
            };
            if (that.option.other.areaStyle) {
              d.areaStyle = {};
              if (that.option.other.areaStyleColor != null) {
                d.areaStyle.color = that.option.other.areaStyleColor;
              }
            }
            data.push(d);
          });
        }
        else {
          var sdata = [];
          this.option.xAxis.data.forEach(function (itemj, j) {
            var value = 0;
            datas.forEach(function (iteml, l) {
              if (iteml.name == itemj) {
                value = iteml.value;
                return false;
              }
            });
            if (that.dataSource.xAxiscolor) {
              sdata.push({
                value: value,
                itemStyle: {
                  color: that.dataSource.xAxiscolor.split(',')[j]
                }
              });
            } else {
              sdata.push(value);
            }
          });

          var d = {
            type: "line",
            data: sdata,
            smooth: that.option.other.smooth
          };
          if (that.option.other.areaStyle) {
            d.areaStyle = {};
            if (that.option.other.areaStyleColor != null) {
              d.areaStyle.color = that.option.other.areaStyleColor;
            }
          }
          data.push(d);
        }
      }
      this.option.series = data;
    },

    /**
     * 获取数据
     * @param {*} id 
     */
    async findDataSource(id) {
      var dataSource = await findById(id);
      var result = [];
      if (dataSource.data.config) {
        var config = JSON.parse(dataSource.data.config);
        switch (config.type) {
          case "table":
            var tableData = await businessDataFormSource({
              dataSourceId: dataSource.data.dataSourceId,
              inParams: JSON.stringify(config.inParams),
              timeStamp: this.$utils.timestamp()
            });
            result = tableData.data;
            break;
          case "view":
            var viewData = await businessDataFormSource({
              dataSourceId: dataSource.data.dataSourceId,
              inParams: JSON.stringify(config.inParams),
              timeStamp: this.$utils.timestamp()
            });
            result = viewData.data;
            break;
          case "proc":
            break;
          case "interface":
            break;
          case "custom":
            result = JSON.parse(config.custom)
            break;
        }
      }
      return result;
    }
  }
}
</script>

<style>
.ant-card {
  height: 100%;
  position: relative;
}

.ant-card .document-close-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 200;
}

.portal-box .ant-card-body {
  width: 100%;
  height: calc(100%);
  padding: 2px !important;
}

.eip-chart-container {
  width: 100%;
  height: 100%;
}


.eip-common-noData {
  text-align: center;
  padding-top: 50px;
}

.eip-common-noData-eChart {
  padding-top: 70px;
}

.eip-img {
  width: 200px;
  height: 200px;
}

.eip-noData-txt {
  font-size: 14px;
  color: #909399;
  line-height: 20px;
}
</style>
